<template>
  <el-dialog v-bind="$attrs" width="920px" :title="$t('flyparam.components') + ' ' + $t('common.import') + '/' + $t('common.export')" v-on="$listeners" @closed="close">
    <div class="text-center">
      <el-radio-group v-model="mode">
        <el-radio :label="1">{{ $t('common.import') }}</el-radio>
        <el-radio :label="2">{{ $t('common.export') }}</el-radio>
      </el-radio-group>
    </div>
    <!-- 导入 -->
    <div v-if="mode === 1">
      <el-upload
        ref="upload"
        class="upload-demo"
        drag
        action
        :file-list="fileList"
        multiple
        :auto-upload="false"
        accept=".xlx, .xlsx"
        style="margin: 0 auto; width: 100%; text-align: center; padding: 10px 0;"
        :limit="1"
        :on-change="handleFileChange"
        :on-remove="() => fileList = []"
      >
        <i class="el-icon-upload" />
        <div class="el-upl  oad__text" v-html="$t('flyparam.upload_file_tip1')">
          <i18n path="flyparam.file_upload" tag="span" for="file_upload_click">
            <em>{{ $t('flyparam.file_upload_click') }}</em>
          </i18n>
        </div>
        <div class="el-upload__text">
          <p v-html="$t('flyparam.upload_file_tip2', {type : 'Excel'})" />
        </div>
        <template #tip>
        <el-button
          type="text"
          @click="download"
        >
          <i class="el-icon-download" />
          <span class="underline">{{ $t('flyparam.download_excel_templte') }}</span>
        </el-button>
      </template>
      </el-upload>
      <div style="margin:15px 0px">
        <span style="margin:0px 50px">{{ $t('flyparam.duplicate_data_tip') }}</span>
        <el-radio-group v-model="duplicateHandleMethod">
          <el-radio :label="1">{{ $t('flyparam.data_handle_option1') }}
            <el-tooltip class="item" effect="dark" placement="top" :open-delay="300">
              <template #content>
                <div v-html="$t('flyparam.data_handle_option1_tip')" />
              </template>
              <button class="hint-button">
                <span role="img" class="hint-svg">
                  <svg-icon icon-class="question2" />
                </span>
              </button>
            </el-tooltip>
          </el-radio>
          <el-radio :label="2">{{ $t('flyparam.data_handle_option2') }}
            <el-tooltip class="item" effect="dark" placement="top" :open-delay="300">
              <template #content>
                <div v-html="$t('flyparam.data_handle_option2_tip')" />
              </template>
              <button class="hint-button">
                <span role="img" class="hint-svg">
                  <svg-icon icon-class="question2" />
                </span>
              </button>
            </el-tooltip>
          </el-radio>
          <el-radio :label="3">{{ $t('flyparam.data_handle_option3') }}
            <el-tooltip class="item" effect="dark" placement="top" :open-delay="300">
              <template #content>
                <div v-html="$t('flyparam.data_handle_option3_tip')" />
            </template>
              <button class="hint-button">
                <span role="img" class="hint-svg">
                  <svg-icon icon-class="question2" />
                </span>
              </button>
            </el-tooltip>
          </el-radio>
        </el-radio-group>
      </div>
    </div>
    <!-- 导出 -->
    <div v-else-if="mode === 2">
      <el-tree
        ref="tree"
        :data="treeData"
        default-expand-all
        show-checkbox
        node-key="componentId"
        @check-change="treeCheckChange"
      >
      <template v-slot="{node,data}">
        <div class="w-full">
          <div class="flex justify-between items-center w-full pr-3">
            <span v-ellipsis class="inline-block" style="width: 300px;">{{ node.label }}</span>
          </div>
        </div>
      </template>
      </el-tree>
    </div>
    <template #footer>
      <div class="flex justify-between">
        <div>
          <el-button v-if="mode === 2" class="ml-2" type="primary" size="small" @click="handleSelectAll">{{ $t('flyparam.select_all') }}</el-button>
        </div>
        <div>
          <el-button size="small" @click="close">{{ $t('common.cancel') }}</el-button>
          <el-button
            :disabled="(mode === 1 && fileList.length <= 0) || (mode === 2 && checkedKeys.length <= 0)"
            size="small"
            type="primary"
            :loading="loading"
            @click="confirm"
          >{{ $t('common.confirm') }}</el-button>
        </div>
    </div>
  </template>
  </el-dialog>
</template>

<script>
import {
  importParameterComponent,
  exportParameterComponent, exportParameterComponentTpl
} from '@/api/parameter'
import common from '@/utils/common'
import { formatDate } from '@/utils/formatDate'
export default {
  props: {
    treeData: {
      type: Array
    },
    componentIds: {
      type: Array
    }
  },
  data() {
    return {
      mode: 1,
      formData: null,
      duplicateHandleMethod: 1,
      loading: false,
      fileList: [],
      checkedKeys: []
    }
  },
  methods: {
    download() {
      const loading = this.$loading({
        lock: true,
        text: this.$t('flyparam.please_wait'),
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      exportParameterComponentTpl().then((res) => {
        loading.close()
        // createLink(res.url)
        common.downloadFile(
          res,
          'Param-component-import-template',
          '.xlsx'
        )
      })
        .catch(() => {
          loading.close()
        })
    },
    treeCheckChange() {
      this.checkedKeys = this.$refs.tree.getCheckedKeys(true)
    },
    handleSelectAll() {
      this.$refs.tree.setCheckedKeys(this.componentIds)
    },
    handleFileChange(file) {
      this.formData = new FormData()
      this.formData.append('file', file.raw)
      this.fileList.push(file)
    },
    confirm() {
      this.loading = true
      if (this.mode === 1) {
        importParameterComponent(this.formData, this.duplicateHandleMethod)
          .then((res) => {
            this.$message.success(
              this.$t('flyparam.import_success', { sucNum: res.sucNum, failNum: res.failNum })
            )
            this.$emit('confirm')
          })
          .catch((err) => {
            this.$message.error(err.message)
          })
          .finally(() => {
            this.loading = false
          })
      } else if (this.mode === 2) {
        const keys = this.$refs.tree.getCheckedKeys(true)
        this.checkedKeys = keys
        exportParameterComponent(keys)
          .then((res) => {
            common.downloadFile(res, 'Param-component-export-' + formatDate(new Date().getTime() / 1000, 'YYYYMMDD-hhmmss', null), '.xlsx')
          })
          .finally(() => {
            this.loading = false
          })
      }
    },
    close() {
      if (this.mode === 2) {
        this.checkedKeys = []
        this.$refs.tree.setCheckedNodes([])
      } else if (this.mode === 1) {
        this.$refs.upload.clearFiles()
      }
      Object.assign(this.$data, this.$options.data())
      this.$emit('update:model-value', false)
      this.mode = 1
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/mixin.scss';
@include hintButton;

::v-deep .el-upload {
  display: block;
}

::v-deep .el-upload-list--text {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}

::v-deep .el-upload-dragger {
  width: 80%;
  margin: 0 auto;
}
</style>
